Bootstrap

Motivations
- Can you find tabs in TRU Board Games Playground?
Bootstrap tabs
- For consistent look and feel, and design templates - There are many topics to read here.
  - Read all in Bootstrap Tabs and Pills. Study the last two examples carefully.
  - Trial 1: Let's try to write tabs. Also include a new tab 'Mine Sweeper'.
     <ul class="nav ???"> <li class="active"><a data-toggle="tab" href="#tab-how-to-play">How to play</a></li> <li><a data-toggle="tab" href="#tab-n-puzzle-game">n-Puzzle game</a></li> <li><a data-toggle="tab" href="#tab-ttt">Tic-tac-toe</a></li> ??? </ul> <div class="???"> <div id="tab-how-to-play" class="tab-pane fade in active"> <h3>How to play</h3> <p>Some content.</p> </div> <div id="tab-n-puzzle-game" class="tab-pane fade"> <h3>n-Puzzle game</h3> <p>Some content in menu 1.</p> </div> <div id="tab-ttt" class="tab-pane fade"> <h3>Tic-tac-toe</h3> <p>Some content in menu 2.</p> </div> ??? </div>
Lab 4.
- The tabs in the next program, lab4_bgp.html, are not properly displayed.
- Find the HTML code for the tabs, and fix it, so that the tabs are properly displayed.
- Also include a new tab and its content for n-Queens.
- Let's download and complete the program.
  - lab4_bgp.html
  - menu_icon.png
Learning outcomes

7.3 Bootstrap - Tab